<template>
  <div class="contain">
    <div class="header">输入天道秘传</div>
    <div class="body">
      <input onkeyup="this.value=this.value.replace(/\D/g,'')" maxlength="6" v-model="code" class="btn"/>
    </div>
      <div class="btn2" @click="handleClick('/start',code)">确定</div>
      <div class="btn2" @click="handleBack()">返回</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
        code:''
    };
  },
  methods: {
    handleClick(url, data) {
        if(!data){
            alert('请输入天道秘传')
            return
        }else if(true){
            // alert('暂无此功能')
        this.$router.push({ path: url, query: {data} });
        }
    },
    handleBack(){
        this.$router.history.go(-1)
    }
  },
};
</script>
<style scoped>
.contain {
  height: 100vh;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../assets/images/img003.png);
}
.header {
  height: 60px;
  line-height: 60px;
  font-size: 48px;
  color: #a1bbe7;
  font-weight: border;
}
.body {
  /* height: 100%; */
  margin: 40px;
}
.btn {
  width: 200px;
  height: 60px;
  line-height: 60px;
  border-radius: 10px;
  background-color: #fff;
  font-size: 24px;
  font-weight: border;
  color: #000;
  text-align: center;
  margin: 20px auto;
}
.btn2 {
  width: 200px;
  height: 60px;
  line-height: 60px;
  border-radius: 10px;
  background-color: #256be5;
  font-size: 24px;
  font-weight: border;
  color: #000;
  text-align: center;
  margin: 20px auto;
}
.btn2:hover{
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
  transition: all 0.2s;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid #fff;
  cursor: pointer;
}
</style>